<template>
  <SecondaryPageTemplate
    page-title="学校荣誉"
    page-subtitle="广州南洋理工职业学院"
    breadcrumb-category="学校概况"
    breadcrumb-page="学校荣誉"
    sidebar-title="学校概况"
    :sidebar-items="sidebarItems"
    :content-title="(schoolInfo.school_name || '学校') + '荣誉展示'"
    :content-subtitle="'办学成就与社会认可'"
    :banner-image="bannerImage"
  >
    <template #content>
      <!-- 荣誉介绍 -->
      <div class="mb-8" v-if="!loading">
        <p class="text-gray-700 leading-relaxed mb-4">
          学校近年来在办学过程中获得了众多荣誉和认可，这些成就体现了学校在教育教学、人才培养、社会服务等方面的卓越表现。
        </p>
      </div>

      <!-- 加载状态 -->
      <div class="mb-8 text-center" v-if="loading">
        <div class="inline-flex items-center px-4 py-2 text-gray-600">
          <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          正在加载荣誉信息...
        </div>
      </div>



      <!-- 荣誉展示 -->
      <div class="space-y-8">
        <!-- 国家级荣誉 -->
        <div class="bg-gradient-to-r from-yellow-50 to-amber-50 rounded-lg p-6 border-l-4 border-yellow-500">
          <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
            <svg class="w-6 h-6 text-yellow-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
            </svg>
            国家级荣誉
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">全国国防教育特色学校</h4>
              <p class="text-sm text-gray-600">教育部首批认定（全国首批中唯一民办高校）</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">全国民办非企业单位优秀服务品牌</h4>
              <p class="text-sm text-gray-600">民政部认定</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">全国首届军事训练营优秀组织单位</h4>
              <p class="text-sm text-gray-600">国家相关部门认定</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">全国党建工作标杆院系培育创建单位</h4>
              <p class="text-sm text-gray-600">教育部认定</p>
            </div>
          </div>
        </div>

        <!-- 省级荣誉 -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 border-l-4 border-blue-500">
          <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
            <svg class="w-6 h-6 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
            省级荣誉
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">省域高水平高职院校建设计划</h4>
              <p class="text-sm text-gray-600">2022年成功入选（仅有2所民办高职入选）</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">全省教育系统党建工作先进集体</h4>
              <p class="text-sm text-gray-600">广东省委教育工委授予</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">广东省就业工作督查优秀等级</h4>
              <p class="text-sm text-gray-600">广东省教育厅评定</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">广东省国防教育先进工作单位</h4>
              <p class="text-sm text-gray-600">省级认定</p>
            </div>
          </div>
        </div>

        <!-- 行业荣誉 -->
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-6 border-l-4 border-green-500">
          <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
            <svg class="w-6 h-6 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
            </svg>
            行业与社会荣誉
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">广东最具就业竞争力民办学院</h4>
              <p class="text-sm text-gray-600">行业权威机构评定</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">广东最具社会认可度学院</h4>
              <p class="text-sm text-gray-600">社会评价机构认定</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">粤港澳大湾区教育质量评价特色学校</h4>
              <p class="text-sm text-gray-600">区域教育评价认定</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <h4 class="font-semibold text-gray-800 mb-2">全国职业院校官微十强</h4>
              <p class="text-sm text-gray-600">新媒体影响力认定</p>
            </div>
          </div>
        </div>

        <!-- 排名成就 -->
        <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-6 border-l-4 border-purple-500">
          <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
            <svg class="w-6 h-6 text-purple-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"/>
              <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"/>
            </svg>
            排名与评价
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white p-6 rounded-lg shadow-sm text-center">
              <div class="text-3xl font-bold text-purple-600 mb-2">#3</div>
              <div class="text-sm text-gray-600">全国民办高职高专院校</div>
              <div class="text-xs text-gray-500 mt-1">GDI排行榜（2024）</div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-sm text-center">
              <div class="text-3xl font-bold text-purple-600 mb-2">#2</div>
              <div class="text-sm text-gray-600">广东省民办高职院校</div>
              <div class="text-xs text-gray-500 mt-1">GDI排行榜（2024）</div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-sm text-center">
              <div class="text-3xl font-bold text-purple-600 mb-2">#2</div>
              <div class="text-sm text-gray-600">省级民办教育专项资金</div>
              <div class="text-xs text-gray-500 mt-1">连续五年获得（2020-2024）</div>
            </div>
          </div>
        </div>

        <!-- 总结 -->
        <div class="bg-gradient-to-r from-[#C32A31] to-[#991E29] text-white p-6 rounded-lg">
          <h3 class="text-xl font-semibold mb-4">持续发展 再创辉煌</h3>
          <p class="text-sm opacity-90 leading-relaxed">
            这些荣誉是对学校办学成果的充分肯定，也是激励我们继续前进的动力。学校将继续秉承"创百年学府，育产业精英"的愿景，为培养更多高素质技术技能人才而不懈努力，为粤港澳大湾区建设和国家发展贡献更大力量。
          </p>
        </div>
      </div>
    </template>
  </SecondaryPageTemplate>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SecondaryPageTemplate from './SecondaryPageTemplate.vue'

// 响应式数据
const loading = ref(true)
const schoolInfo = ref({})
const bannerImage = ref('')

// 侧边栏导航项目
const sidebarItems = [
  { name: '学校简介', route: { name: 'SchoolIntroduction' } },
  { name: '现任领导', route: { name: 'CurrentLeadership' } },
  { name: '历任领导', route: { name: 'FormerLeadership' } },
  { name: '学校大事记', route: { name: 'SchoolChronicle' } },
  { name: '学校荣誉', route: { name: 'SchoolHonors' }, active: true },
  { name: '组织架构', route: { name: 'OrganizationStructure' } },
  { name: '标志成果', route: { name: 'SignificantAchievements' } }
]

// 组件挂载时设置数据
onMounted(() => {
  // 设置学校信息（硬编码）
  schoolInfo.value = {
    school_name: '广州南洋理工职业学院'
  }

  // 设置本地横幅图片
  bannerImage.value = '/images/banners/school-honors.jpg'

  // 设置加载完成
  loading.value = false
})
</script>
